<template>
  <background>
    <ul class="menu-ul">
      <li v-for="(item,index) in menu"
          :key="index">
        <a class="home-link"
           :href="item.key"
           target="_self">{{item.value}}</a>
      </li>
    </ul>
  </background>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import background from '@/components/background'

export default {
  name: 'home2',
  title () {
    return this.title
  },
  keywords () {
    return this.keywords
  },
  description () {
    return this.description
  },
  data () {
    return {
      height: "100%",
      menu: [
        {
          key: "/",
          value: "首页",
        },
        {
          key: "/topics",
          value: "归档"
        },
        {
          key: "/archive",
          value: "时间轴"
        },
        {
          key: "/project",
          value: "项目"
        },
        {
          key: "/about",
          value: "关于我"
        },
        {
          key: "/message",
          value: "留言"
        },
        {
          key: "/github",
          value: "Github"
        },
      ],
    }
  },
  components: {
    background
  },
  computed: {
    ...mapGetters('home', ['title', 'keywords', 'description']),
  },
  async asyncData ({ store, route }) {
  },
  methods: {
    handleClick (key) {
      if (this.$router.currentRoute.path === key) {
        return
      }
      this.$router.push({ path: key })
    }
  }
}
</script>

<style lang="scss" scoped>
ul.menu-ul {
  padding: 0;
  li {
    margin: 8px 0;
    cursor: pointer;
    list-style-type: none;
    .home-link {
      color: #fff;
      text-decoration: none;
    }
  }
}
</style>